<template>
  <div class="mainboxgj">
    <div class="mainboxleft">
      <div class="mainlefttopbox">
        <div class="mainsera">
          <div class="xbannername" @click="goback"> <icon-left /> 返回 </div>
        </div>
        <div class="maintoptitle">病例名称</div>
        <div class="gnbottom">
          <div class="tool" @click="tagdcoms('-1')">
            <img src="@/assets/images/letac.png" alt="" class="normal" />
            <img src="@/assets/images/let.png" alt="" class="active" />
          </div>
          <div class="mentox"
            >病例页数:<span>{{ findindex() + 1 }}/{{ imgsrc.length }}</span>
          </div>
          <div class="tool" @click="tagdcoms('1')">
            <img src="@/assets/images/rght.png" alt="" class="normal" />
            <img src="@/assets/images/rghtac.png" alt="" class="active" />
          </div>
        </div>
      </div>

      <div class="box" ref="box">
        <canvas
          id="myCanvaslxh"
          :width="hbwidth"
          :height="hbheight"
          ref="canvasRef"
        ></canvas>
      </div>
      <div ref="gosroll" class="lbox">
        <div
          v-for="(item, index) in imgsrc"
          :key="index"
          class="lboxitem"
          @click="tagdcom(item.caseImgId)"
        >
          <img :src="`${base + item.imgUrl}`" />
          <div class="msx" v-if="item.caseImgId == dcomid"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  // @ts - nocheck
  import { defineProps, defineEmits } from 'vue';
  import { Message, Modal } from '@arco-design/web-vue';

  import {
    defineComponent,
    reactive,
    ref,
    nextTick,
    onMounted,
    onBeforeUnmount,
    SetupContext,
  } from 'vue';
  const base = ref((window as any).config.VUE_APP_IMG_API);
  const goback = () => {
    emit('goback');
  };
  const props = defineProps<{
    imgsrc: string[];
  }>();
  const emit = defineEmits<{
    (event: 'goback'): void;
    (event: 'customEvent', payload: any): void; // 定义自定义事件
  }>();
  const dcomid = ref('10');
  const imgsrc = ref();
  imgsrc.value = props.imgsrc;
  dcomid.value = imgsrc.value[0].caseImgId;

  // 定义画布高低
  const hbwidth = ref();
  const hbheight = ref();
  /// 引用 DOM 元素
  const box = ref<HTMLDivElement | null>(null);
  const canvasRef = ref<HTMLCanvasElement | null>(null);

  // 状态数据
  const state = reactive({
    img: new Image(),
    imgWidth: 480,
    imgHeight: 606,
    ctx: null as CanvasRenderingContext2D | null,
  });

  // 初始化
  onMounted(() => {
    // 设置 canvas 尺寸

    hbwidth.value = box.value?.offsetWidth;
    hbheight.value = box.value?.offsetHeight;

    const canvas = canvasRef.value!;
    console.log(canvasRef.value);

    canvas.width = hbwidth.value;
    canvas.height = hbheight.value;

    // 获取 canvas 上下文
    state.ctx = canvas.getContext('2d');

    // 加载图片
    state.img.src = base.value + imgsrc.value[0].imgUrl;
    state.img.onload = () => {
      state.imgWidth = state.img.naturalWidth;
      state.imgHeight = state.img.naturalHeight;
      draw(); // 图片加载完成后绘制
    };
  });

  // 绘制函数
  const draw = () => {
    const canvas = canvasRef.value!;
    const ctx = state.ctx!;
    const img = state.img;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 计算居中绘制的偏移量
    const scaledWidth = img.naturalWidth;
    const scaledHeight = img.naturalHeight;
    const xOffset = (canvas.width - scaledWidth) / 2;
    const yOffset = (canvas.height - scaledHeight) / 2;

    // 绘制图片
    ctx.drawImage(img, xOffset, yOffset, scaledWidth, scaledHeight);
  };

  //
  const tagdcoms = (i: any) => {
    const index = imgsrc.value.findIndex(
      (item: any) => item.caseImgId == dcomid.value
    );
    if (i == 1) {
      if (imgsrc.value[index + 1]) {
        dcomid.value = imgsrc.value[index + 1].caseImgId;
        tagdcom(dcomid.value);
        draw();
      }
    } else {
      if (imgsrc.value[index - 1]) {
        dcomid.value = imgsrc.value[index - 1].caseImgId;
        tagdcom(dcomid.value);
        draw();
      }
    }
  };

  const tagdcom = (i: any) => {
    console.log('当前图像id', i);
    const imgsrcd = imgsrc.value.find((item: any) => item.caseImgId == i);

    dcomid.value = i;
    state.img.src = base.value + imgsrcd.imgUrl;
    state.img.onload = () => {
      state.imgWidth = state.img.width;
      state.imgHeight = state.img.height;
    };
    // const canvas = state.canvas!;
    // const aspectRatio = state.img.naturalWidth / state.img.naturalHeight;
    // const canvasAspectRatio = canvas.width / canvas.height;

    // // 设置最大宽度和高度
    // const maxWidth = canvas.width * 0.999; // 画布宽度的90%
    // const maxHeight = canvas.height * 0.999; // 画布高度的90%

    // if (canvasAspectRatio > aspectRatio) {
    //   state.imgScale = Math.min(maxHeight / state.img.naturalHeight, 1);
    // } else {
    //   state.imgScale = Math.min(maxWidth / state.img.naturalWidth, 1);
    // }
    draw();
  };

  const findindex = () => {
    if (imgsrc.value.length < 0) {
      return;
    }
    return imgsrc.value.findIndex(
      (item: any) => item.caseImgId == dcomid.value
    );
  };
</script>

<style scoped>
  .mainboxleft {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .bjbox {
    width: 100%;
    height: 172px;
  }
  .bjbox img {
    width: 100%;
    height: 172px;
  }
  .mainboxgj {
    display: flex;
    background-color: black;
    width: 100%;
  }
  .mainlefttopbox {
    width: 100%;
    height: 54px;
    background-color: #24292d;
    border-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
  }
  .mainsera {
    position: absolute;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .maintoptitle {
    font-weight: bold;
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 54px;
  }
  .maintopright {
    display: flex;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translate(0, -50%);
  }
  .czmainitem {
    cursor: pointer;
    margin: 0 5px;
  }
  .gnbocdtop .arco-btn {
    /* margin: 5px 10px; */
  }
  .gnbocdtop {
    height: 170px;
    background-color: black;
    border-bottom: 2px solid #5a5a5a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 10px;
  }
  .gnbocd {
    height: 553px;
    overflow: hidden;
    overflow-y: auto;
    background-color: black;
    border-bottom: 2px solid #5a5a5a;
    display: flex;
    flex-direction: column;
  }
  .gnbocdname {
    font-size: 20px;
    color: #ffffff;
    padding: 10px;
  }
  .gnbottom {
    background-color: #24292d;
    height: 95px;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
  }
  #myCanvaslxh {
    /* border: solid 1px #00ff80; */
    background-color: black;
  }
  .mentox {
    width: 200px;
    height: 50px;
    background: #121419;
    border-radius: 6px 6px 6px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    margin: 0 13px;
  }
  .mentox span {
    display: block;
    font-weight: bold;
    font-size: 24px;
    margin-left: 10px;
    word-spacing: 20px;
  }
  .boxs {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
  }
  .zsdkz {
    font-size: 18px;
    color: #ffffff;
    line-height: 30px;
  }
  .boxsitem {
    width: 130px;
    height: 130px;
    margin: 10px 25px;
    background: black;
  }
  .boxsitems {
    text-align: center;
  }
  .box {
    margin: 0 auto;
    background-color: black;
    width: 100%;
    height: 670px;
    /* border: 2px solid #5a5a5a; */
  }

  .bocd {
    /* margin: 10px; */
    display: flex;
    width: 20%;
    flex-direction: column;
    border-left: 2px solid #5a5a5a;
  }
  .bloxs {
    display: flex;
  }
  .lbox {
    width: 100%;
    height: 95px;
    display: flex;
    margin: 0 auto;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
  }

  .lboxitem {
    background-color: black;
    width: 70px;
    /* height: 70px; */
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lboxitem img {
    width: 55px;
    height: 55px;
  }

  .msx {
    height: 100px;
    width: 2px;
    background-color: #409eff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .gnbocd::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .gnbocd::-webkit-scrollbar-track {
    width: 6px;
    background: rgba(#101f1c, 0.1);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  .gnbocd::-webkit-scrollbar-thumb {
    background-color: rgba(133, 138, 148, 0.938);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    transition: background-color 0.3s;
    cursor: pointer;
  }

  .gnbocd::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.3);
  }

  .jgdovx {
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .xugn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  }
  .xugname {
    width: 80px;
    color: #fff;
    font-size: 16px;
  }
  .xbanner {
    width: 100%;
    font-size: 16px;
    height: 40px;
    background-color: #fff;
    /* line-height: 40px; */
    padding-left: 10px;
    align-content: center;
  }
  .xbannername {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 16px;
  }
  /* 公共类 */
  /* 封装公共按钮类 */
  .tool {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tool img.active {
    cursor: pointer;
    display: none;
  }

  .tool:hover img.normal,
  .tool.active img.normal {
    display: none;
  }

  .tool:hover img.active,
  .tool.active img.active {
    display: block;
  }
  .gnboxmain {
    padding: 0 15px;
  }
  .gnboxitem {
    height: 40px;
    background: #24292d;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0 12px;
    margin: 10px 0;
    font-size: 16px;
  }
  .zsbox {
    width: 384px;
    height: 910px;
    background-color: #121419;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 9;
  }
  .zstop {
    height: 54px;
    width: 100%;
    font-size: 16px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #363739;
  }
  .startbox {
    width: 90px;
    height: 37px;
    background: linear-gradient(180deg, #f4f4f4 0%, #a2a2a2 100%);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #000000;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
  }
  .zsclose {
    position: absolute;
    right: 20px;
    cursor: pointer;
  }
  .startbox:hover {
    color: #007dff;
  }
  .startboxs {
    color: #fff;
    margin-left: 10px;
  }
  .jpan {
    background-color: #424548;
    border-radius: 4px;
    /* padding: 10px 28px; */
    cursor: pointer;
    width: 108px;
    height: 38px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 7px;
    text-align: center;
  }
  .jpanitem {
    width: 70%;
    color: #fff;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .jpan:hover {
    background-color: #409eff;
    border-radius: 4px;
    max-width: 108px;
  }
  .jpanac {
    background-color: #409eff;
    border-radius: 4px;
    max-width: 108px;
  }
  .timerbox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    background: #424548;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #000000;
    color: #a0a2a3;
    font-size: 18px;
    margin-left: 10px;
  }
  .tcbox {
    width: 713px;
    height: 429px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
  }
  .tctopbox {
    width: 100%;
    height: 46px;
    background: #cfcfcf;
    display: flex;
    align-items: center;
  }
  .tcclose {
    position: absolute;
    right: 10px;
    cursor: pointer;
  }
  .tctopname {
    font-size: 16px;
    color: #000000;
    margin: 0 auto;
  }
  .tcmainbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
  }
  .tcmainitem {
    display: flex;
    align-items: center;
    margin: 0 auto;
    border: 1px solid #c1c1c1;
    width: 491px;
    height: 44px;
  }
  .tcitemname {
    width: 175px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #c1c1c1;
  }
  .tcitdes {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .zzcbox {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
  }
  .startboxss {
    width: 112px;
    height: 37px;
    background: linear-gradient(180deg, #ffffff 0%, #c0c0c0 100%);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
  }
  .tsred {
    color: red;

    position: absolute;
    bottom: 95px;
    left: 50%;
    transform: translate(-50%, 0);
  }
</style>
